<!DOCTYPE html>
<html lang="zh-CN">

	<head>
		<meta charset="utf-8">
		<!-- 	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no,viewport-fit=cover" /> -->
		<link rel="stylesheet" type="text/css" href="css/sui.css" />
		<link rel="stylesheet" type="text/css" href="css/sui-flex.css" />
		<link rel="stylesheet" type="text/css" href="css/my.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.min.css" />
		<title></title>
		<style>
			body {
			background-color: #333333;
			overflow-x: hidden;
			overflow-y: hidden;
		}
		.sui-list-item:last-child{
			background-image: none;
		}
		
		.mescroll-empty .empty-icon{
			width: 25% !important;
		}
		
		#pannel1{
			width: 15% !important;
			height: 100vh;
			background: #F3F3F3;
		}
		#pannel2{
			width: 15% !important;
			height: 100vh;
			background: #F3F3F3;
		}
		
		.plan-text{
			color: #F0F0F0;
			font-size: 0.9rem;
			line-height: 1.2rem;
		}
		
		.piple{
			background: #F0F0F0;
			width: 100%;
			height: 0.5rem;
		}
		
		
		.piple-v{
			background: #F0F0F0;
			width: 0.5rem;
		}
		
		.piple-water{
			background: #00BCD4;
			stroke-dasharray: 1000;
			stroke-dashoffset: 1000;
			animation: dash 5s linear 1;
		}
		
		.pool{
			height: 6rem;
			width: 8rem;
			background: #F0F0F0;
			margin-top: -2rem;
		}
	</style>

	</head>

	<body>
		<header class="sui-bar sui-bar-nav">
			<!-- 	<div class="sui-pull-left">
				<img src="img/logo_white.png" style="height: 1.7rem;margin-left: 0.5rem;margin-top: 0.275rem;" />
			</div> -->
			<div class="sui-title">水务系统</div>


		</header>

		<div class="sui-wrap sui-flex-col" id="datas">
			<section class="sui-content" id="pannel1">
				<ul class="sui-list sui-collapse sui-border">
					<div class="sui-collapse-item">
						<li class="sui-list-item sui-collapse-header">
							<div class="sui-list-item-inner">
								<div class="sui-list-item-title">总貌</div>
								<div class="sui-list-item-right">
									<i class="sui-iconfont sui-icon-down sui-collapse-arrow"></i>
								</div>
							</div>
						</li>
						<div class="sui-collapse-content sui-border-b" style="display: block;">
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">1东吉收费</div>
								</div>
							</li>
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">2西宁收费</div>
								</div>
							</li>
						</div>
					</div>
					<div class="sui-collapse-item">
						<li class="sui-list-item sui-collapse-header  ">
							<div class="sui-list-item-inner">
								<div class="sui-list-item-title">视频监控</div>
								<div class="sui-list-item-right">
									<i class="sui-iconfont sui-icon-down sui-collapse-arrow"></i>
								</div>
							</div>
						</li>
						<div class="sui-collapse-content sui-border-b" style="display: none;">
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">龙山净水厂</div>
								</div>
							</li>
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title  sui-padded-l-15">河滨净水厂</div>
								</div>
							</li>
						</div>
					</div>
					<div class="sui-collapse-item">
						<li class="sui-list-item sui-collapse-header">
							<div class="sui-list-item-inner">
								<div class="sui-list-item-title">泵站</div>
								<div class="sui-list-item-right">
									<i class="sui-iconfont sui-icon-down sui-collapse-arrow"></i>
								</div>
							</div>
						</li>
						<div class="sui-collapse-content sui-border-b" style="display: none;">
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">1东吉收费</div>
								</div>
							</li>
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">2西宁收费</div>
								</div>
							</li>
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">3西安一收费</div>
								</div>
							</li>
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">3西安二收费</div>
								</div>
							</li>
						</div>
					</div>
					<div class="sui-collapse-item">
						<li class="sui-list-item sui-collapse-header">
							<div class="sui-list-item-inner">
								<div class="sui-list-item-title">净水厂</div>
								<div class="sui-list-item-right">
									<i class="sui-iconfont sui-icon-down sui-collapse-arrow"></i>
								</div>
							</div>
						</li>
						<div class="sui-collapse-content " style="display: none;">
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">龙山净水厂</div>
								</div>
							</li>
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title  sui-padded-l-15">河滨净水厂</div>
								</div>
							</li>
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">辽河净水厂</div>
								</div>
							</li>
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">石河净水厂</div>
								</div>
							</li>
							<li class="sui-list-item">
								<div class="sui-list-item-inner">
									<div class="sui-list-item-title sui-padded-l-15">龙头净水厂</div>
								</div>
							</li>
						</div>
					</div>
				</ul>
			</section>


			<div class="sui-content sui-flex-1 sui-flex-col">
				<div class="sui-flex-row sui-flex-middle">
					<p class="piple  " style="width: 1rem;"></p>
				</div>
				<div class="sui-flex-row sui-flex-middle" style="margin-left: 0.1rem;">

					<p class="plan-text">电磁阀</p>

					<i class="iconfont icon-diancifa" style="color: #F0F0F0 ;font-size:2rem;margin-bottom: 2.3rem;"></i>

				</div>
				<div class="sui-flex-row sui-flex-middle" style="margin-left: -0.35rem;">
					<p class="piple" style="width: 1rem;"></p>
				</div>
				<div class="sui-flex-row sui-flex-middle" style="margin-left: -0rem;">
					<div style="height: 10rem;">
						<p class="piple-v piple-water" style="height: 5rem;"></p>
						<p class="piple" style="width: 0.5rem;"></p>
						<p class="piple-v" style="height: 5rem;"></p>
					</div>
				</div>
				<div class="sui-flex-row sui-flex-middle">
					<div style="height: 10rem;">
						<p class="piple" style="width: 1rem;"></p>
						<div class="pool" style="margin-left: 1rem;">



						</div>
						<p class="piple" style="width: 2rem;margin-left: 9rem;margin-top: -1rem;"></p>



						<p class="piple" style="width: 11rem;margin-top: 6rem"></p>
					</div>
				</div>
				<div class="sui-flex-col sui-flex-middle" style="width: 30rem;">
					<div style="height: 29rem;">
						<p class="piple-v" style="height: 29.15rem;margin-top: 0.5rem;"></p>
					</div>
					<div style="height: 35rem;">
						<div class="sui-flex-col">
							<p class="piple" style="width: 5rem;margin-top: 3.5rem;"></p>
							<div>
								<i class="iconfont icon-shuibeng " style="color: #F0F0F0 ;font-size:3rem;margin-left: -1.5rem;"></i>
								<p class="plan-text" style="margin-left: -1.5rem;">1#软起泵</p>
							</div>
							<p class="piple" style="width: 5rem;margin-top: 3.5rem;margin-left: -1.5rem;"></p>
						</div>
						
						<div class="sui-flex-col" style="margin-top: 3.5rem;">
							<p class="piple" style="width: 5rem;margin-top: 3.5rem;"></p>
							<div>
								<i class="iconfont icon-shuibeng " style="color: #F0F0F0 ;font-size:3rem;margin-left: -1.5rem;"></i>
								<p class="plan-text" style="margin-left: -1.5rem;">2#软起泵</p>
							</div>
							<p class="piple" style="width: 5rem;margin-top: 3.5rem;margin-left: -1.5rem;"></p>
						</div>
						
						<div class="sui-flex-col" style="margin-top: 4rem;">
							<p class="piple" style="width: 5rem;margin-top: 3.5rem;"></p>
							<div>
								<i class="iconfont icon-shuibeng " style="color: #F0F0F0 ;font-size:3rem;margin-left: -1.5rem;"></i>
								<p class="plan-text" style="margin-left: -1.5rem;">3#软起泵</p>
							</div>
							<p class="piple" style="width: 5rem;margin-top: 3.5rem;margin-left: -1.5rem;"></p>
						</div>
						
						<div class="sui-flex-col" style="margin-top: 4rem;">
							<p class="piple" style="width: 5rem;margin-top: 3.5rem;"></p>
							<div>
								<i class="iconfont icon-shuibeng " style="color: #F0F0F0 ;font-size:3rem;margin-left: -1.5rem;"></i>
								<p class="plan-text" style="margin-left: -1.5rem;">1#电磁起泵</p>
							</div>
							<p class="piple" style="width: 5rem;margin-top: 3.5rem;margin-left: -1.5rem;"></p>
						</div>

					</div>
					<div style="height: 29rem;">
						<p class="piple-v" style="height: 29.15rem;margin-top: 0.5rem;margin-left: -0.5rem;"></p>
					</div>
					<div >
						<div class="sui-flex-col">
							<p class="piple" style="width: 5rem;"></p>
							<i class="iconfont icon-diancifa1 " style="color: #F0F0F0 ;font-size:2rem; margin-top: -1.75rem;"></i>
							<p class="piple" style="width: 5rem;"></p>	
						</div>
						<p class="plan-text" style="margin-left: 3.5rem;">压力变送器</p>
					</div>	
					
					

				</div>

			</div>


			<div class="sui-content" id="pannel2">


			</div>
		</div>


		<script type="application/javascript" src="lib/sui.js"></script>
		<script type="application/javascript" src="lib/sui-accordion.js"></script>
		<script type="application/javascript" src="js/common.js"></script>

		<script type="text/javascript">
			//id ,是否折叠其他,默认显示第几个 0开始
			sui.accordion('#pannel1', true, 1);
			sui.accordion('#pannel2', true, 0);
		</script>

	</body>

</html>
